{% extends 'index.html' %}
{% block ace-content %} 
<style type="text/css">
	.row {
		margin-right: -15px;
  		margin-left: -15px;
	}
</style>
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-align-justify "></i> SQL工单列表</h1>
         </div>
                <!-- /.col-lg-12 -->
         
    </div>
	<div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-desktop fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{totalOrder}}</div>
                                    <div>总工单数</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-green">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-laptop fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{doneOrder}}</div>
                                    <div>已执行</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-yellow">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-tablet fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{rollbackOrder}}</div>
                                    <div>已回滚</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-red">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-mobile-phone fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{rejectOrder}}</div>
                                    <div>已撤回</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
     </div>     
    <div class="row">
         <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa fa-database"></i>上线SQL列表明细 
                           	
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">                   
                            <table width="100%" class="table table-striped table-bordered table-hover" id="deployTableList">
                                <thead>
                                    <tr>
                                    	<th class="text-center">ID</th>
                                    	<th class="text-center">工单申请人</th>
                                    	<th class="text-center">环境类型</th>
                                        <th class="text-center">数据库信息</th>
                                        <th class="text-center">SQL内容</th>
                                        <th class="text-center">执行人</th>
                                        <th class="text-center">发布时间</th>
                                        <th class="text-center">工单状态</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	{% for ds in orderList %}
                                		<tr class="odd gradeX">
                                			<td class="text-center">{{ds.id}} </td>

                                			<td class="text-center">
												{{ds.order_apply}}
                                			</td>
                                			<td class="text-center"> 
												{% if ds.order_db.db_env == 'test' %}
													<span class="label label-info">测试环境 </span>
												{% else %}
													<span class="label label-success">生产环境</span>
												{% endif %}                                				
                                			</td>                                			
                                			<td class="text-center">
                                				{{ds.order_db.db_host}} - {{ds.order_db.db_name}}  
                                			</td>
                                			<td class="text-center"> 
                                				<a href="/db/sql/order/run/{{ds.id}}/" target="_blank" class="tooltip-test" data-toggle="tooltip" title="{{ds.order_sql}}">{{ds.order_sql|slice:":40" }}...</a>
                                			</td>
                                			<th class="text-center">{{ds.order_executor}}</th>
                                			<th class="text-center">{{ds.create_time|date:"Y/m/d H:i  "}}</th>
                                			<td class="text-center">
                                				{% if ds.order_status == 1 %}
                                					<span class="label label-info">待授权</span>
                                				{% elif ds.order_status == 2 %}
                                					<span class="label label-success">已执行</span>
                                				{% elif ds.order_status == 3 %}
                                					<span class="label label-danger">已回滚</span>  
                                				{% elif ds.order_status == 6 %}
                                					<span class="label label-default">已授权</span>     
                                				{% elif ds.order_status == 7 %}
                                					<span class="label label-danger">已失败</span>                                					                         					
                                				{% else %}
                                					<span class="label label-warning">已撤销</span>
                                				{% endif %}
                                			</td>
                                			<td class="text-center">  
                                				{% if user.is_superuser %}
													<a href="/db/sql/order/run/{{ds.id}}/" target="_blank"><button  type="button" class="btn btn-default"><abbr title="执行SQL"><i class="fa fa-play-circle-o"></i></button></a>	
													{% if ds.order_status == 1 %}
														<button  type="button" class="btn btn-default"><abbr title="授权"><i class="fa fa-check"  onclick="updateSqlOrderStatus(this,{{ds.id}},'auth')"></i></button>
													{% else %}
														<button  type="button" class="btn btn-default disabled"><abbr title="授权"><i class="fa fa-check"></i></button>												
													{% endif %}
													{% if ds.order_status == 4 %}
														<button  type="button" class="btn btn-default disabled"><abbr title="取消"><i class="fa fa-times "></i></button>						
													{% else %}
														<button  type="button" class="btn btn-default"><abbr title="取消"><i class="fa fa-times "  onclick="updateSqlOrderStatus(this,{{ds.id}},'disable')"></i></button>		
													{% endif %}														
													<button  type="button" class="btn btn-default"><abbr title="删除"><i class="glyphicon glyphicon-trash"  onclick="deleteSqlOrder(this,{{ds.id}})"></i></button>
												{% else %}
													{% if ds.perm %}
														<a href="/db/sql/order/run/{{ds.id}}/" target="_blank"><button  type="button" class="btn btn-default"><abbr title="执行SQL"><i class="fa fa-play-circle-o"></i></button></a>	
														{% if ds.order_status == 1 %}
															<button  type="button" class="btn btn-default"><abbr title="授权"><i class="fa fa-check"  onclick="updateSqlOrderStatus(this,{{ds.id}},'auth')"></i></button>
														{% else %}
															<button  type="button" class="btn btn-default disabled"><abbr title="授权"><i class="fa fa-check"></i></button>
														{% endif %}
														{% if ds.order_status == 4 %}
															<button  type="button" class="btn btn-default disabled"><abbr title="取消"><i class="fa fa-times "></i></button>						
														{% else %}
															<button  type="button" class="btn btn-default"><abbr title="取消"><i class="fa fa-times "  onclick="updateSqlOrderStatus(this,{{ds.id}},'disable')"></i></button>		
														{% endif %}											
													{% else %}
														<button  type="button" class="btn btn-default disabled"><abbr title="执行SQL"><i class="fa fa-play-circle-o"></i></button>
														<button  type="button" class="btn btn-default disabled"><abbr title="授权"><i class="fa fa-check" ></i></button>
														<button  type="button" class="btn btn-default disabled"><abbr title="取消"><i class="fa fa-times "></i></button>															
													{% endif %}
                                				{% endif %}
								           				
                                				
                                			</td>
                                		</tr>
                                	{% endfor %}
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
										{% if orderList %}
											<ul class="pagination">
											        {% if orderList.has_previous %}
											            <li><a href="/db/sql/order/list/{{ projectList.previous_page_number }}/">&laquo;</a></li>
											        {% endif %}
											        {% for page in orderList.paginator.page_range %}
											        	{% if orderList.number == page %}
											        		<li class="disabled"><a href="/db/sql/order/list/{{page}}/">{{page}}</a></li>
											        	{% else %}
											        		<li><a href="/db/sql/order/list/{{page}}/">{{page}}</a></li>
											        	{% endif %}
											        {% endfor %}
											        {% if orderList.has_next %}
											            <li><a href="/db/sql/order/list/{{ orderList.next_page_number }}/">&raquo;</a></li>
											        {% endif %}
											</ul>
                     		            {% endif %}	  
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
    </div>  
<script type="text/javascript">

    
    $(document).ready(function() {
        $('#deployTableList').DataTable();
    } );    
       
    
	function deleteSqlOrder(obj,id){
		var txt=  "是否确认删除？";
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var option = {
			title: "工单"+id,
			btn: parseInt("0011",2),
			onOk: function(){
				$.ajax({
					  dataType: "JSON",
					  type: 'DELETE',
					  url: '/api/sql/orders/'+id+'/',
				      success:function(response){	
				    	btnObj.removeAttr('disabled');
	                	window.wxc.xcConfirm("删除成功！", window.wxc.xcConfirm.typeEnum.success);
	                	location.reload();				            
				      },
		              error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("删除失败！", window.wxc.xcConfirm.typeEnum.error);	
		              }
					});
			},
			onCancel:function(){	
			},
			onClose:function(){
			}
		}
		window.wxc.xcConfirm(txt, "custom", option);			   
	}    
	
	function updateSqlOrderStatus(obj,id,model){ 
		if (model == 'auth' ){
			if (model == 'auth'){
				var txt=  "是否确认授权？";
				var title = "SQL工单授权";
			}
			var option = {
				title: title,
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
						  dataType: "JSON",
						  type: 'PUT',
						  url: '/api/sql/orders/'+id+'/',
						  data: {
							  "order_status":6
						  },
					      success:function(response){			            
				            window.wxc.xcConfirm("授权成功", window.wxc.xcConfirm.typeEnum.success);
				            location.reload();
		                
						},
			            error:function(response){
			            	window.wxc.xcConfirm("授权失败！", window.wxc.xcConfirm.typeEnum.error);
			            },							  
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}
			window.wxc.xcConfirm(txt, "custom", option);				
		} 		
		else if (model == 'disable'){
			window.wxc.xcConfirm("撤销原因：", window.wxc.xcConfirm.typeEnum.input,{
				onOk:function(result){
					if (result.length == 0){
						/* 如果没有输入字符串则直接退出 */
						return;
					};
					$.ajax({
						  dataType: "JSON",
						  type: 'PUT',
						  url: '/api/sql/orders/'+id+'/',
						  data: {
							  'order_cancel':result,
							  "order_status":4
						  },
					     success:function(response){	
				            window.wxc.xcConfirm("撤销成功", window.wxc.xcConfirm.typeEnum.success);
				            location.reload();
						},
			            error:function(response){
			            	btnObj.removeAttr('disabled');
			            	window.wxc.xcConfirm("服务器响应错误，撤销失败", window.wxc.xcConfirm.typeEnum.error);
			            },							  
						});
					
				}
			})			
		}
   }
	
	
	
	
</script>
{% endblock %}